<template>
  <div class="">
    <LivePlayerDemo :autoplay="true" :videourl="videoUrl" @errorUrl="errorUrl" />

    <div
      style="width: 100%; text-align: center; padding: 0.4vw 0"
      class="foot"
      v-if="videoUrl"
    >
      <div @click="checkControl" class="btn1">点击查看监控</div>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations, mapActions } from "vuex";
import LivePlayerDemo from "components/LivePlayerDemo.vue";
export default {
  name: "publicvideo",
  props: {
    title: String,
    videoUrl: String,
    list: {
      type: Object,
    },
  },
  components: {
    LivePlayerDemo,
  },
  data() {
    return {
      wins: {},
      timers: null,
      cameraIndexCodes: [],
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  methods: {
    ...mapMutations(["setVideoShow", "setSocketVideoUrl"]),
    errorUrl(n) {
      this.$emit("errorUrl", n);
    },
    closeVideoBox() {
      this.setSocketVideoUrl("");
      this.$emit("close");
    },
    checkControl() {
      //console.log(this.list);
      const { device_code } = this.list;
      this.flag = this.checkCode(device_code);
      if (this.flag == false) return;
      this.cameraIndexCodes.push(device_code);
      this.g_OpenWindow("./play.html?" + this.cameraIndexCodes.join(";"), 860, 600);
    },
    checkCode(code) {
      var flag = true;

      $.each(this.cameraIndexCodes, function (i, n) {
        if (code == n) {
          flag = false;
          return flag;
        }
      });
      return flag;
    },
    // 打开窗口
    g_OpenWindow(pageURL, innerWidth, innerHeight) {
      var ScreenWidth = window.screen.availWidth;
      var ScreenHeight = window.screen.availHeight;
      var StartX = (ScreenWidth - innerWidth) / 2;
      var StartY = (ScreenHeight - innerHeight) / 2;
      this.wins = window.open(
        pageURL,
        "OpenWin",
        "left=" +
          StartX +
          ", top=" +
          StartY +
          ", Width=" +
          innerWidth +
          ", height=" +
          innerHeight +
          ", resizable=no, scrollbars=yes, status=no, toolbar=no, menubar=no, location=no"
      );

      this.timers = setInterval(() => {
        this.isCloseWin();
      }, 500);
      this.wins.focus();

      // setTimeout(function () {
      //   if (this.flag == true) {
      //     try {
      //       this.wins.initPlugin();
      //     } catch (err) {}
      //   }
      // }, 1000);
      this.wins.onbeforeunload = function () {
        this.cameraIndexCodes = [];
      };
    },
    isCloseWin() {
      if (this.wins.closed) {
        this.cameraIndexCodes = [];
        this.timers && clearInterval(this.timers);
      }
    },
  },
};
</script>
<style lang="scss">
.flex {
  display: flex;
  justify-content: space-between;
}
.top {
  padding: 0.5vw 0.5vw;
  background-image: linear-gradient(
    90deg,
    rgba(3, 83, 165, 0.72) 0%,
    rgba(3, 56, 117, 0.93) 61%,
    rgba(3, 53, 110, 0.96) 100%
  );
  color: #fff;
}
.close {
  cursor: pointer;
}
.btn1 {
  width: 5.2vw;
  height: 2.08vw;
  line-height: 2.04vw;
  margin: 0 auto;
  background: url("../assets/images/icon/btn.png") no-repeat center;
  background-size: 100%;
  color: #fff;
  cursor: pointer;
  font-size: 0.52vw;
}
.btn1:hover {
  color: #03f2fb;
}
</style>
